

let Vue  //保存 Vue 的 构造函数
import RouterView from "./my-router-view";
import RouterLink from './my-router-link'
export default class VueRouter {
  /**
   * @static install 函数，为 VueRouter 的静态方法
   *  Vue.use() 调用插件 install 函数时，会将 Vue 的构造函数传入
   * @param {*} _Vue  Vue 的构造函数
   * 
   */
  static install (_Vue) {
    Vue = _Vue

    /* 
    
     为了 延迟处理 保证 router 被使用时，router被创建
    
    */
    Vue.mixin({
      beforeCreate () {
        const { router } = this.$options
        if (router) {
          Vue.prototype.$router = router
        }
      }
    })


    //注册实现两个组件
    Vue.component("router-link", RouterLink)
    Vue.component("router-view", RouterView)

  }

  constructor(props) {
    this.$options = props;
    console.log("$options ", this.$options)
    /* 
      响应式数据 （ defineReactive ） 
    */

    this.current = window.location.hash.slice(1) || '/'
    Vue.util.defineReactive(this, "matched", [])

    /* 
    match 方法递归遍历路由表，获取匹配关系数据
    */
    this.match()

    //监听hash url 变化
    window.addEventListener("hashchange", this.onHashChange.bind(this))

  }

  onHashChange () {
    this.current = window.location.hash.slice(1)
    this.matched = []
    this.match()
  }

  match (routes) {
    routes = routes || this.$options.routes

    for (const route of routes) {
      if (route.path === '/' && this.current === '/') {
        this.matched.push(route)
        return
      }

      if (route.path !== '/' && this.current.indexOf(route.path) !== -1) {
        this.matched.push(route)

        // 如果存在 children，继续判断
        if (route.children) {
          this.match(route.children)
        }
        return
      }
    }
  }

  push (path) {
    window.location.hash = path;
  }
}
